<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>David Bardwell CS701 Final Project</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css"
          rel="stylesheet" />
    <script type="text/javascript" 
            src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" 
            src="js/jquery-ui-1.8.23.custom.min.js"></script>    
    
    <script src="js/finalProjectMain.js"></script>
    <script src="js/finalProjectYelp.js"></script>
    <script src="js/finalProjectMap.js"></script>
    <script src="js/finalProjectMapUtil.js"></script>
                
    <link rel="stylesheet" href="css/finalProject.css">
</head>

<body>
    <div id="target">
    <ul>
        <li>
            <a href="#tab1">Google Start Search</a>
        </li>
        <li>
            <a href="#tab2">Google Detail Results</a>
        </li>
        <li>
            <a href="#tab3">Yelp Reviews</a>
        </li>
    </ul>

    <div id="tab1">
        <p>Provide your starting location</p>
        <section id="selectionOption">
            <div id="ui-widget">
            <table>
                <tr>
                    <td><label for="searchSelection" id="search_label">Pick a category:</label></td> 
                    <td><input id="searchSelection" value="restaurant" size="30"
                               title="Enter * to see all categories"></td>
                    <td>
                        <button type="button" id="goPlacesButton">Places!</button>
                    </td>
                </tr>
                <tr>
                    <td><label for="searchRadius" id="search_radius_label">Search Radius (Meters):</label></td>
                    <td><input type="number" id="searchRadius" value="1000"/></td>
                    <td></td>
                </tr>
                <tr>
                    <td><label for="orderChoice" id="order_choice_label">Order By:</label></td>
                    <td><select name="orderChoice" id="orderChoice">
                        <option value="title">Name</option>
                        <option value="rating">Rating</option>
                        <option value="distance">Distance</option>
                        </select></td>
                    <td></td>
                </tr>
                <tr>
                    <td><label for="travelModeChoice" id="travel_mode_label">Travel Mode:</label></td>
                    <td><select name="travelModeChoice" id="travelModeChoice">
                        <option value="Driving">Driving</option>
                        <option value="Walking">Walking</option>
                        <option value="Bicycling">Bicycling</option>
                        <option value="Transit">Transit</option>
                        </select></td>
                    <td></td>
                </tr>
            </table>
            <p id="restartSearchLocation"></p>
            </div>
            
            <div id="searchResults">
                <p></p>
                <h3 id="searchResultsTableHeader">Search Result</h3>
                <button type="button" id="nextResultButton">Next 20 Results</button>
                <p></p>
                <table id="searchResultsTable">
                
                </table>
            </div>

        </section>
        
        <div id="locationType">
            <input type="radio" name="startingPosition" value="currentLocation" checked>Current Location
            <br>
            <input type="radio" name="startingPosition" value="address">From Address
            <br>
            
            <label for="favoriteAddress" id="favoriteAddressLabel">Favorite Address:</label>
            <select id="favoriteAddress" name="favoriteAddress">
                <option value="FavoriteAddress1">10 Van de Graaff Drive, Burlington, MA</option>
            </select>
            <br>

            <table>
                <tr>
                    <td><label for="street1" id="street1_label">Street:</label></td> 
                    <td><input id="street1" size="30"/></td>
                    <td></td>
                </tr>
                <tr>
                    <td><label for="cityState" id="cityState_label">City, State:</label></td> 
                    <td><input id="cityState" size="30"/></td>
                    <td><button type="button" id="addToFavoritesButton">Add To Favorites</button>
                </tr>
            </table>
            
            <div id="map">
                
            </div>
        </div>
        
        <div id="directionsPanelFirstTab">
            
        </div>
    </div>
        
    <div id="tab2">
        <h2 id="locationTitle"></h2>
        <div id="leftSide">
            <div id="locationSummaryInformation">
                <p id="locationPhone"></p>
                <p id="locationAddress"></p>
            </div>    
            <div id="photos">
                <div id="locationPhotos">
                
                </div>
                <div id="detailRatingsPanel">
        
                </div>
            </div>
        </div>
        
        <div id="rightSide">
            <div id="locationHours">
            
            </div>
            <div id="directionsPanel">
            
            </div>
        </div>    
        
        <div id="directionsMap">
        
        </div>
        
        <div id="output">
        </div>
    </div>
        
    <div id="tab3">
        <h1>Yelp Reviews</h1>
        
        <div id="YelpReviews">
            
        
        </div>
    </div>
    </div>
<script>
    //show tooltip for any input field with a title attribute
    $(document).tooltip();
</script>    
</body>
</html>
